:root {
    --plh-ukr: 30px;
    --plh-bg: white;
    --plh-brd-ukr: 1px;
    --plh-brd-rad: 5px;
    --plh-brd-wrn: rgb(100, 100, 100);
    --plh-tmb-wrn: rgb(220, 220, 220);
    --plh-ind: 10px;
    --plh-trn: .1s;
    --plh-trp-ukr: 5px;
    --plh-trp-wrn: cadetblue;
    --plh-mat-bg: rgb(210, 210, 210);
    --plh-mat-wrn-tls: rgb(150, 150, 150);
    --plh-hvr-wrn: rgb(230, 230, 230);
}

.plh {
    display: inline-block;
    box-sizing: border-box;
    height: var(--plh-ukr);
    line-height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    width: max-content;
    vertical-align: top;
    position: relative;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--plh-bg);
    border: var(--plh-brd-ukr) solid var(--plh-brd-wrn);
    text-indent: var(--plh-ind);
    border-radius: var(--plh-brd-rad);
    -webkit-border-radius: var(--plh-brd-rad);
    -moz-border-radius: var(--plh-brd-rad);
    -ms-border-radius: var(--plh-brd-rad);
    -o-border-radius: var(--plh-brd-rad);
}

.plh::after {
    font-family: 'Material Icons';
    font-style: normal;
    src: url(gf/mi.woff2) format('woff2');
    content: "chevron_right";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    line-height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    text-align: center;
    font-weight: bold;
    transform: rotate(90deg);
    text-indent: 0;
    transition: var(--plh-trn);
    -webkit-transition: var(--plh-trn);
    -moz-transition: var(--plh-trn);
    -ms-transition: var(--plh-trn);
    -o-transition: var(--plh-trn);
    width: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
}

.plh::before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    width: calc(var(--plh-ukr) - var(--plh-brd-ukr));
    height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    line-height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    border-left: inherit;
    background-color: var(--plh-tmb-wrn);
}

.plh-isi {
    box-sizing: content-box;
    height: 0;
    overflow: hidden;
    position: relative;
    transition: var(--plh-trn);
    -webkit-transition: var(--plh-trn);
    -moz-transition: var(--plh-trn);
    -ms-transition: var(--plh-trn);
    -o-transition: var(--plh-trn);
    padding-right: calc(var(--plh-ukr) - var(--plh-brd-ukr) + var(--plh-ind));
}

.plh.akt {
    height: max-content;
}

.plh.akt::after {
    transform: rotate(270deg);
}

.plh.akt .plh-isi {
    height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
    line-height: calc(var(--plh-ukr) - 2 * var(--plh-brd-ukr));
}

.plh.akt .plh-isi:first-of-type {
    border-top: inherit;
}

.plh-isi.trp::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    width: var(--plh-trp-ukr);
    background-color: var(--plh-trp-wrn);
}

.plh-isi:hover {
    color: var(--plh-trp-wrn);
    background-color: var(--plh-hvr-wrn);
}

.plh.mat {
    cursor: default;
}

.plh.mat {
    background-color: var(--plh-mat-bg);
    color: var(--plh-mat-wrn-tls);
}