$namelist: regist, search, manager, hp, user;
$colors: (
    regist: #6E8BF0,
    search: #AC82E5,
    manager: #C082E5,
    hp: #F177D6,
    user: #DD82e5
);
$columns: (
    regist: #{1} / #{4},
    search: #{4} / #{7},
    manager: #{7} / #{10},
    hp: #{10} / #{13},
    user: #{7} / #{10}
);
$rows: (
    regist: #{1},
    search: #{1},
    manager: #{1},
    hp: #{2},
    user: #{1}
);
@function colors($key) {
    @return map-get($colors, $key);
}
@function columns($key) {
    @return map-get($columns, $key);
}
@function rows($key) {
    @return map-get($rows, $key);
}


.c-menu {
    padding: 10px 20px;
    margin: 0px auto;
    width: 100%;
    background-color: $white;
    
    @each $name in $namelist{
        &--#{$name} {
            grid-column: columns(#{$name});
            grid-row: rows(#{$name}) span;

        }
    }

    &--regist {
        padding: 0 20px 0 0;
    }

    &--search {
        padding: 0 10px 0 10px;
    }

    &--manager {
        padding: 0 10px 0 10px;
    }

    &--hp {
        padding: 0 0 0 20px;
    }

    &--user {
        padding: 0 10px 0 10px;
    }

    &__icon {
        border-radius: 50%;
        border: 1px solid $icon_circle;
        box-shadow:0px 0px 1px;
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-position: right 4px bottom 5px;
        background-size: 80%;
        margin: 0 auto;
        margin-bottom: 10px;

        &--1 {
            background-image: url(#{$admin_img_path}menu_icon1.png);
        }
        &--2 {
            background-image: url(#{$admin_img_path}menu_icon2.png);
        }
        &--3 {
            background-image: url(#{$admin_img_path}menu_icon3.png);
        }
        &--4 {
            background-image: url(#{$admin_img_path}menu_icon4.png);
        }
        &--5 {
            background-image: url(#{$admin_img_path}menu_icon5.png);
        }
    }

    &__name {
        text-align: center;

        @each $name in $namelist{
            &--#{$name} {
                color: colors(#{$name});
            }
        }
    }

    &__list {
        list-style: none;
        padding: 0px;
        margin:0px;
    }

    &__list--menu {
        
        @each $name in $namelist{
            &--#{$name} {
                border-left: 1px solid colors(#{$name});
                border-right: 1px solid colors(#{$name});
                border-top: 1px solid colors(#{$name});

                &:last-child {
                    border-bottom: 1px solid colors(#{$name});
                }
            }
        }
    }

    &__subname {
        padding: 15px 0px;
        padding-left: 20px;
        display: block;
        position: relative;
        background-color: #F9F8F7;

        @each $name in $namelist{

            &--#{$name} {
                color: colors(#{$name});

                &::after {
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-top: solid 2px colors(#{$name});
                    border-right: solid 2px colors(#{$name});
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    content: ' ';
                    position: absolute;
                    right: 10px;
                    top: 23px;
                }

                &:hover {
                    color: colors(#{$name});
                }
            }
        }
    }
}