Zelda64Recomp/assets/scss/styles/components/Config.scss

.config__icon-buttons {
    display: flex;
    position: absolute;
    top: space(8);
    right: space(0);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: auto;

    .icon-button {
        margin: 0 space(8);
    }
}

.config__form {
    @include border-top($color-border-soft);
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: $border-radius-modal;
    border-bottom-left-radius: $border-radius-modal;
}

.config__wrapper {
    flex: 1 1 100%;
    width: auto;
    height: auto;
    padding: space(16);
    border-radius: 0dp;
    border-bottom-right-radius: $border-radius-modal;
    border-bottom-left-radius: $border-radius-modal;
    background-color: $color-bg-shadow;
    text-align: left;

    p {
        @extend %body;
        padding: space(16);
        line-height: space(28);
        white-space: pre-line;

        b {
            color: $color-primary;
        }

        i {
            color: $color-warning;
            font-style: normal;
        }
    }
}

.config__hz-wrapper {
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border-radius: 0dp;
    text-align: left;
}

.config__header, .config__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: $color-bg-shadow;
}

.config__header {
    @include border-bottom($color-border-soft);
    padding: space(12) space(20);
}

.config__footer {
    @include border-top($color-border-soft);
    padding: space(20) space(20);
    border-bottom-right-radius: $border-radius-modal;
    border-bottom-left-radius: $border-radius-modal;
}

.config__header-left {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;

    > :not(:first-child) {
        margin-left: space(8);
    }
}

.config__row {
    display: flex;
    flex-direction: row;
}